<template>
	<view class="index">
		<view class="t1">

			<nav-bar color="#22" backgroundColor="#fff" navbarbg="#fff" leftIcon="">
				<view class="t2" slot="title">
					<image :src="imgUrl+'10.png'" mode="widthFix"></image>
				</view>
			</nav-bar>

			<view class="t3">
				<swiper v-if="banner.length>1" class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="1000">
					<swiper-item v-for="(item,i) in banner" :key="i">
						<view class="swiper-item">
							<image :src="item.imageUrl"
								@click="goTo('/pages/home/shopDetail?productid='+item.link+'&store='+JSON.stringify(store))">
							</image>
						</view>
					</swiper-item>
				</swiper>
				<image v-else :src="banner[0].imageUrl"
					@click="goTo('/pages/home/shopDetail?productid='+banner[0].link+'&store='+JSON.stringify(store))">
				</image>
			</view>
			<view class="t4">
				<view class="t5" v-if="store && store.storeName">
					<view class="t6">
						<view>
							<image :src="imgUrl+'2.png'" mode="widthFix"></image>
							<text>
								{{store.storeName}} | <text class="t7">{{(store.distance | tofix)||'0'}}km</text>
								<!-- {{store.distance?'|':''}} {{store.distance?(store.distance | tofix):''}} -->
							</text>
							<text class="t7"> </text>
						</view>
						<view @click="show=true">
							更多门店 >
						</view>
					</view>
					<view class="t8">
						{{store.fullAddress}}
					</view>

				</view>
				<view class="t9">
					<view class="t10" @click="goTo('/pages/index/index?page=shop')">

						<view class="t12">
							<view>
								蛋糕商城
							</view>
							<view>
								可提前7天预定
							</view>
						</view>
						<view class="t13">
							精选优质动物奶油，奶香自然、醇厚、带有大自然气息的淡奶油
						</view>

					</view>
					<view class="">
						<view class="t11" @click="goTo('/pages/index/index?page=pay')">
							<view class="t14">
								会员卡
							</view>
							<view class="t15">
								<image :src="imgUrl+'1100.png'"></image>
							</view>
							<view class="t16">
								<image :src="imgUrl+'7.png'"></image>
							</view>
						</view>
						<view class="t016" @click="pushSEt">
							<view>
								东哥微店
							</view>
							<view class="t16">
								<image :src="imgUrl+'7.png'"></image>
							</view>
						</view>

					</view>
				</view>
				<view class="t17">
					<image :src="imgUrl+'8.png'" mode="widthFix"></image>
					<view>
						<u-notice-bar bgColor="#ffffff" color="#333333" :icon="false" direction="column"
							:text="textList">
						</u-notice-bar>
					</view>
				</view>
				<!-- <view class="t18">
					<view class="t19">
						一周热卖
					</view>
					<view class="t20">
						<view v-for="(item,idx) in hotArray" :key="idx" @click="goTo('/pages/home/shopDetail?id='+item.link)">
							<view>
								<image :src="item.imageUrl"></image>
							</view>
							<view>
								<image :src="imgUrl+'9.png'" mode="widthFix"></image>{{item.subTitle}}
							</view>
						</view>


					</view>
				</view> -->
				<view class="t21">
					<view class="t22">
						当季推荐
					</view>
					<view class="t23">
						<view v-for="(item,idx) in recoArray" :key="idx"
							@click="goTo('/pages/home/shopDetail?productid='+item.link+'&store='+JSON.stringify(store))">
							<view>
								<image class="img1" :src="item.imageUrl"></image>
							</view>
							<view class="t24">
								<view class="text_over">
									{{item.title}}
								</view>
								<view>
									<image class="img2" :src="imgUrl+'9.png'" mode="widthFix"></image>
								</view>
								<view class="t25">
									¥{{item.subTitle.split(',')[0]}} <text>¥{{item.subTitle.split(',')[1]}}</text>
								</view>
							</view>

						</view>
					</view>
				</view>

			</view>

		</view>
		<u-popup :show="show" @close="show=false">
			<view class="com">
				<view class="r1">附近门店</view>
				<view class="r2">
					<view v-for="(item,idx) in storeArray" :key="idx" @click="selectStore(idx)"
						:style="{'background':selectId==idx?'#E6E7E7':'#fff'}">

						<view class="r3">
							<view>{{item.storeName}}</view>
							<view>
								距离{{item.distance | tofix}}
								<image @click="freeTell(item.phone)" :src="imgUrl+'11.png'" mode="widthFix"></image>
								<image @click="openLocationFn(item)" :src="imgUrl+'12.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="r4">
							<image class="img2" :src="imgUrl+'home_site_icon_gray@2x.png'" mode="widthFix">
							</image>
							<view>{{item.fullAddress}}</view>
						</view>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar.vue'
	export default {
		data() {
			return {
				show: false,
				imgUrl: this.imgUrl,
				PageCur: 'home',
				textList: [],
				banner: "",
				hotArray: [],
				recoArray: [],
				store: "",
				storeArray: [],
				selectId: 0
			}
		},
		components: {
			navBar,
		},

		filters: {
			tofix(item) {
				if (item) {
					return item.toFixed(2) 
				}
			}
		},
		async created() {
			console.log('3333333333')
			// uni.getStorageSync("storeId")
			this.$a.GetOpenToken().then(() => {
				this.GetList1();
				this.GetList2();
				this.GetList3();
				this.GetList4();
				if (!uni.getStorageSync("store")) {
					this.getLocation();
				} else {
					let store = uni.getStorageSync("store")
					console.log(store, 111111111)
					this.store = store
					this.storeArray = uni.getStorageSync("storeArray")
				}
			})

		},
		async onShow() {
			console.log('111111111')
			// uni.getStorageSync("storeId")
			this.$a.GetOpenToken().then(() => {
				this.GetList1();
				this.GetList2();
				this.GetList3();
				this.GetList4();
				if (!uni.getStorageSync("store")) {
					this.getLocation();
				}
			})
		},
		mounted() {
			console.log('222222222')
		},
		methods: {
			openLocationFn(item) {
				uni.openLocation({
					// 传入你要去的纬度
					latitude: item.latitude,
					// 传入你要去的经度
					longitude: item.longitude,
					// 传入你要去的地址信息 不填则为空
					address: item.fullAddress,
					// 缩放大小
					scale: 18,
					success: function() {
						console.log('成功的回调success');
					}
				})
			},
			freeTell(phone) {
				wx.makePhoneCall({
					phoneNumber: phone, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			getLocation() {
				var self = this;
				wx.getSystemInfo({
					success(res) {
						console.log(res, 111)
						var isopendingwei = res.locationEnabled;
						if (isopendingwei == false) {
							uni.showToast({
								title: '请先开启手机GPS定位,然后重新进入小程序',
								icon: 'none'
							})

						} else {
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {
									self.$http.GetAllStore({
										code: "L68lO1",
										lng: res.longitude,
										lat: res.latitude,
										distance: 5000
									}).then(res => {
										self.store = res.content[0]
										self.storeArray = res.content
										uni.setStorageSync("store", self.store)
										uni.setStorageSync("storeArray", self.storeArray)
										uni.setStorageSync("storeId", self.store.storeId)
									})
								}
							});

						}
					}
				})


			},
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			GetList1() {
				this.$http.GetList({
					code: "L68lO1"
				}).then(res => {
					// this.banner = res.content[0].imageUrl;
					this.banner = res.content

				})
			},
			GetList2() {
				this.$http.GetList({
					code: "xlOGR0"
				}).then(res => {
					res.content.forEach((item) => {
						this.textList.push(item.title)
					})
				})
			},
			GetList3() {
				this.$http.GetList({
					code: "N0VooM"
				}).then(res => {
					this.hotArray = res.content

				})
			},
			GetList4() {
				this.$http.GetList({
					code: "5FSREI"
				}).then(res => {
					this.recoArray = res.content
				})
			},
			selectStore(index) {
				this.store = this.storeArray[index]
				this.show = false;
				this.selectId = index
				uni.setStorageSync("store", this.store)
				uni.setStorageSync("storeId", this.store.storeId)
			},
			pushSEt() {
				wx.navigateToMiniProgram({
					appId: 'wx08c9fd1aee024f4c',
					path: 'pages/index/index',
					extraData: {
						foo: 'bar'
					},
					success(res) {
						console.info(res);
						// 打开成功
					}
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.index {
		.t1 {
			.t2 {
				background: #FFFFFF;
				text-align: center;
				width: 100%;

				image {
					width: 100%;
					height: 80upx;
				}

			}

			.t3 {
				.swiper {
					height: 520upx;
				}

				image {
					width: 100%;
					height: 520upx;
				}
			}

			.t4 {
				width: 100%;
				background: #F8F8F8;
				border-radius: 24upx 24upx 0px 0px;
				margin-top: -20upx;
				position: relative;
				z-index: 1;
				padding: 40upx 30upx;

				.t5 {
					height: 166upx;
					background: #FFFFFF;
					box-shadow: 0px 2upx 11upx 0px rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					padding: 20upx;

					.t6 {
						display: flex;
						align-items: center;
						font-size: 24upx;
						font-weight: 400;
						color: #999999;
						justify-content: space-between;
						margin-bottom: 10upx;

						.t7 {
							font-size: 26upx;
							font-weight: 400;
							color: #888888;
							margin-left: 6upx;
						}

						image {
							width: 24upx;
							margin-right: 10upx;
							height: 24upx;
							margin-top: 4upx;

						}

						text {
							font-size: 32upx;
							font-weight: 400;
							color: #222222;
						}
					}

					.t8 {
						font-size: 26upx;
						font-weight: 400;
						color: #888888;
					}
				}


				.t9 {
					display: flex;
					align-items: center;
					margin-top: 10upx;
					width: 105%;
					margin-left: -0.35rem;

					.t10 {
						background: url(https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/3.png) no-repeat;
						background-size: 100% 100%;
						width: 386upx;
						height: 350upx;
						padding: 40upx 30upx;

						.t12 {
							display: flex;
							justify-content: space-between;

							>view:nth-child(1) {
								font-size: 32upx;
								font-weight: 500;
								color: #333333;
							}

							>view:nth-child(2) {
								font-size: 22upx;
								line-height: 40upx;
								font-weight: 400;
								color: #FFFFFF;
								background: url(https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/4.png) no-repeat;
								background-size: 100% 100%;
								width: 180upx;
								text-align: center;
								height: 40upx;
							}
						}

						.t13 {
							font-size: 22upx;
							font-weight: 400;
							color: #999999;
							margin-top: 20upx;
						}
					}

					.t016 {
						display: flex;
						justify-content: space-between;
						background: url(https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/bg22.png) no-repeat;
						background-size: 100% 100%;
						width: 328upx;
						position: relative;
						height: 110upx;
						padding: 40upx 30upx;

						.t16 {
							text-align: right;
							margin-top: -4upx;

							image {
								width: 40upx;
								height: 40upx;
							}
						}
					}

					.t11 {
						width: 328upx;
						height: 242upx;
						background: url(https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/bg11.png) no-repeat;
						background-size: 100% 100%;
						padding: 40upx 30upx;
						position: relative;

						.t14 {
							font-size: 32upx;
							margin-bottom: 22upx;
							font-weight: 500;
							color: #333333;
						}

						.t15 {
							text-align: center;

							image {
								width: 108upx;
								height: 108upx;
							}
						}

						.t16 {
							text-align: right;
							margin-top: -4upx;

							image {
								width: 40upx;
								height: 40upx;
								position: absolute;
								top: 40upx;
								right: 38upx;
							}
						}
					}
				}

				.t17 {
					height: 80upx;
					background: #FFFFFF;
					box-shadow: 0px 2px 11upx 0px rgba(0, 0, 0, 0.1);
					border-radius: 16upx;
					display: flex;
					margin-top: 10upx;
					align-items: center;
					padding: 10upx 20upx;
					padding-right: 0;

					>image {
						width: 58upx;
						height: 58upx;
					}

					>view {
						width: 100%;
					}
				}

				.t18 {
					.t19 {
						font-size: 32upx;
						font-weight: 500;
						color: #333333;
						margin: 38upx 0;
					}

					.t20 {
						width: 100%;
						overflow-y: scroll;
						display: flex;
						margin-bottom: 20upx;

						>view {
							margin-right: 32upx;

							>view:nth-child(1) {
								display: flex;
								align-items: center;

								image {
									width: 148upx;
									height: 148upx;
									border-radius: 20upx;
								}
							}

							>view:nth-child(2) {
								font-size: 28upx;
								font-weight: 500;
								color: #333333;
								display: flex;
								margin-top: 20upx;


								image {
									width: 72upx;
									margin-right: 10upx;
									height: 40upx;
								}
							}
						}
					}

				}

				.t21 {
					.t22 {
						margin: 38upx 0;
						font-size: 32upx;
						font-weight: 500;
						color: #333333;
					}

					.t23 {
						>view {
							width: 330upx;
							height: 504upx;
							background: #FFFFFF;
							box-shadow: 0px 2upx 11upx 0upx rgba(0, 0, 0, 0.1);
							border-radius: 16upx;
							display: inline-block;
							border-radius: 20upx;
							margin-right: 30upx;
							margin-bottom: 20upx;

							.img1 {
								width: 100%;
								height: 300upx;
								border-top-left-radius: 20upx;
								border-top-right-radius: 20upx;

							}

							.t24 {
								padding: 20upx;

								.img2 {
									width: 72upx;
									height: 40upx;
									margin: 20upx 0;
								}

								.t25 {
									font-size: 28upx;
									font-weight: 500;
									color: #333333;

									text {
										font-size: 24upx;
										font-weight: 400;
										display: inline-block;
										text-decoration: line-through;
										color: #999999;
										margin-left: 24upx;
									}
								}
							}

						}

						>view:nth-child(2n) {
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	.com {
		height: 780upx;
		overflow-y: scroll;
		background: #F8F8F8;
		padding: 30upx 20upx;
		border-radius: 20px 20px 0px 0px;

		.r1 {
			font-size: 32upx;
			font-weight: 400;
			color: #222222;
			text-align: center;
		}

		.r2 {
			width: 100%;
			border-radius: 20upx;
			margin-top: 20upx;
			overflow-y: scroll;
			height: 660upx;

			>view {
				background: #FFFFFF;
				border-radius: 20upx;
				padding: 22upx;
				margin-bottom: 20upx;

				.r3 {
					display: flex;
					justify-content: space-between;

					align-items: center;

					>view:nth-child(1) {
						font-size: 32upx;
						font-weight: 400;
						color: #222222;
					}

					>view:nth-child(2) {
						font-size: 22upx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;

						image {
							width: 44upx;
							height: 44upx;
							margin-left: 40upx;
						}
					}
				}

				.r4 {
					font-size: 26upx;
					font-weight: 400;
					color: #888888;
					display: flex;
					margin-top: 18upx;

					image {
						width: 30upx;
						flex-shrink: 0;
						margin-right: 15upx;
						height: 30upx;
						margin-top: 8upx;
					}

					text {
						display: inline-block;
						width: 500upx;
					}
				}
			}
		}

	}
</style>
